<template>
  <div id="app">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-table :data="bookList" border style="width: 100%">
        <el-table-column prop="bookname" label="书名" width="180">
        </el-table-column>
        <el-table-column prop="sort" label="图书种类"> </el-table-column>
        <el-table-column prop="price" label="图书价格"> </el-table-column>
        <el-table-column label="详细情况">
          <el-popover placement="right" width="400" trigger="click">
            <el-table :data="gridData">
              <el-table-column
                width="150"
                property="name"
                label="图书类别"
              ></el-table-column>
              <el-table-column
                width="100"
                property="introduce"
                label="图书简介"
              ></el-table-column>
            </el-table>
            <el-button slot="reference">查看详情</el-button>
          </el-popover>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bookList: [],
      dialogVisible: false,
      gridData: [
        {
          name: "科幻作品",
          introduce: "遨游科幻的世界,感受不同的科技",
        },
        {
          name: "儿童读物",
          introduce: "让孩子们的童年更加丰富多彩",
        },
        {
          name: "哲学文刊",
          introduce: "品大家风范,赏诗词年华",
        }
      ],
    };
  },
  created() {
    this.getBookList();
  },
  methods: {
    getBookList() {
      this.$http.get("book").then((res) => {
        this.bookList = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
</style>